<template>
  <view class="contain">
    <view class="header">
      <ul v-for="(item,index) in tabs" :id="index" :key="index">
        <li @click="selectTab(index,item)" :class="{isSelected: selected==index}">{{item}}</li>
      </ul>
    </view>
    <view class="main">
      <ul class="tab-item">
        <li v-for="(item,index) in list" :key="index" @click="select(index,item)">{{item[1]}}</li>
      </ul>
    </view>
  </view>
</template>

<script>
// import cityData from "@/pagesA/pages/addressData/data.js";
export default {
  name: "SelectAddr",
  props: {
    names: {
      type: Array,
      default: "[]"
    },
    // cityData: {
    //   type: Object,
    //   default: "{}"
    // }
  },
  data() {
    return {
      selected: 0,
      values: [],
      tabs: [],
      list: [],
      cityData: [],
	  
	  province: [],
	  city: [],
	  area: [],
	  town: [],
    };
  },
  created() {
    // 初始化
    this.tabs[0] = this.names[0];
    this.selected = 0;
	this.getAddressFather();
    // this.list = this.cityData[0];
	// console.log('cityData', this.cityData, cityData)
  },
  methods: {
	// 获取省一级地址
	async getAddressFather() {
		const res = await uni.$api.currency.getAddressFather();
		res.data.forEach(val => {
			this.province.push([val.id,val.title])
		})
		this.list = this.province;
		console.log(this.list)
	},
	// 获取下级地址
	async getAddressChild(pid) {
		const res = await uni.$api.currency.getAddressChild(pid);
		this.list = [];
		res.data.forEach(val => {
			this.list.push([val.id,val.title])
		})
	},
    // 选择地址
    select(index, item) {
		console.log(index, item)
      this.values.splice(this.selected, 1, item);
      if (this.selected + 1 === this.names.length) {
        let values = this.values.map(item => {
          return item[1];
        });
        this.$emit("selectAddr", values);
        return false;
      }
      this.tabs.splice(this.selected, 1, item[1]);
      this.tabs.push(this.names[this.selected + 1]);
      this.selected++;
      this.setList(this.selected,item);
    },
    // 选择头部
    selectTab(index, item) {
      this.tabs.length = index + 1;
      this.tabs.splice(index, 1, this.names[index]);
      this.values.length = index;
      this.selected = index;
      this.setList(this.selected,item);
    },
	// 选择地址触发列表
	setList(selected,item) {
	  if (selected == 0) {
	    this.list = this.province;
	  } else if (selected < this.names.length) {
	    this.getAddressChild(item[0]);
	  }
	}
    // // 选择地址触发列表
    // setList(selected) {
    //   if (selected == 0) {
    //     this.list = this.cityData[0];
    //   } else if (selected < this.names.length) {
    //     this.list = this.cityData[selected][this.values[selected - 1][0]];
    //   }
    // }
  }
};
</script>
<style scoped>
* {
  padding: 0;
  margin: 0;
  list-style: none;
}
.contain {
  position: relative;
  text-align: center;
}
.header {
  border-bottom: solid 2px #f6f6f6;
  display: flex;
  justify-content: space-around;
  height: 50px;
  line-height: 50px;
}
.main {
  top: 0px;
  height: 220px;
  overflow-y: auto;
}
.tab-item {
  text-align: center;
  background: #fff;
  overflow: hidden;
  /* height: 500px; */
  overflow-y: auto;
}
.main li {
  height: 50px;
  line-height: 50px;
  border-top: solid 1px #f6f6f6;
}
.isSelected {
  color: #fd7400;
}
</style>